<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>banner</title>
	<script src='js/jquery-1.12.4.min.js'></script>
	<style>
	*{margin: 0;padding: 0;}
	#bannerwrap{height: 514px;width: 100%;margin:50px auto 0;position: relative;}
	#banner li{position: absolute;width:100%;height:100%;display: none;}
	#banner .active{display: block;}
	</style>
</head>
<body>
	<div id="bannerwrap">
		<ul id="banner">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script>
	$(function(){
		$('#banner>li').each(function(i){
			$(this).css('background','url(img/banner'+(i+1)+'.jpg) no-repeat center top');
		});
		var $index,$nextindex;                      //定义变量保存下标
		setInterval(function(){
			$index=$('.active').index();                //获取下标
			$nextindex=$index+1;
			if($index>$('#banner>li').size()-1){$index=0;};       //边界判断
			if($nextindex>$('#banner>li').size()-1){$nextindex=0;};
			$('#banner>li').eq($index).fadeOut(500);
			$('#banner>li').eq($nextindex).fadeIn(500);
			$('#banner>li').removeClass('active');
			$('#banner>li').eq($nextindex).addClass('active');
		},3000)
		function change(str){
			//str.split('');
			//console.log(str.split('').reverse().join(''));
			return str.split('').reverse().join('');
		}
		//console.log(change('hello'));
		function racecar(race){
			if(race===race.split('').reverse().join('')){
				return race +'is palindrome';
			}else{
				return race +' is not palindrome';
			}
		}
		$div=$('<div>');
		//console.log($div.addClass('ac'));
		
	})
	try {
		console.log(x);
	} catch (e) {
		console.log(e)
	}
	</script>
</body>
</html>
